<template>
	<view class="greyBox">
		<view class="bankList">
			<view class="item" v-for="(item,index) in list" :key="index"
				:style='"background: url(https://supply.zhongyimotor.com/upload/applet/bank_"+item.bankAbbreviation+"_bg.png) 0 center no-repeat;background-size: 100%"'>
				<view class="logo">
					<u-icon
						:name='"https://supply.zhongyimotor.com/upload/applet/bank_"+item.bankAbbreviation+"_icon.png"'
						size="72" />
				</view>
				<view class="info">
					<view class="bankName">{{item.bankName}}</view>
					<view class="accountName">{{item.accountName}}</view>
					<view class="accountNo">
						{{item.accountNo}}
						<view class="delete" @click="deleteItem(item)">删除</view>
					</view>
				</view>
			</view>
			<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				v-if="list.length == 0" text="未配置银行信息"></u-empty>
			<u-toast ref="uToast" />

		</view>
		<u-button class="marTop_100" type="success" shape="circle" :custom-style="buttonStyle"
			@click="toAdd">添加银行</u-button>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		data() {
			return {
				buttonStyle,
				list: [],
				pageForm: {
					current: 1,
					size: 99
				}
			}
		},
		onShow() {
			this.getBankConfig();
		},
		methods: {
			toAdd() {
				uni.navigateTo({
					url: '/pages/bank/add'
				})
			},
			getBankConfig() {
				let that = this;
				let parmas = that.pageForm;
				that.$api.getBankConfig(parmas).then(res => {
					that.list = res.result.records;
				})
			},
			deleteItem(item) {
				let that = this
				uni.showModal({
					title: '该操作不可撤销',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							that.$api.bankDelete(item.id).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: "success",
									duration: 2000,
									success: () => {
										that.getBankConfig()
									}
								})
							})
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.bankList {
		.item {
			width: 690rpx;
			height: 252rpx;
			padding: 40rpx;
			display: flex;
			margin: 20rpx auto;
			border-radius: 24rpx;
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.4);

			.logo {
				border-radius: 300rpx;
				margin-right: 30rpx;
			}

			.info {
				width: 100%;

				.bankName {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 42rpx;
					margin-bottom: 4rpx;
				}

				.accountName {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
				}

				.accountNo {
					display: flex;
					justify-content: flex-end;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44rpx;
					letter-spacing: 1px;
					margin-top: 60rpx;

					.delete {
						width: 72rpx;
						height: 32rpx;
						background: rgba(255, 255, 255, 0.22);
						border-radius: 30rpx;
						text-align: center;
						line-height: 32rpx;
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 6rpx;
						margin-left: 28rpx;
					}
				}
			}
		}
	}
</style>